<!DOCTYPE html>
<html lang="en">
<head>
       <title id="Description">Using jqxChart with JSP and MySQL.</title>
 <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <style type="text/css">
        .labels {
            font-size: smaller;
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                var source = {
                    datatype: "json",
                    datafields: [{
                        name: 'ProductName',
                        type: 'string'
                    }, {
                        name: 'UnitsInStock',
                        type: 'int'
                    }],
                    data: {
                        category: 1
                    },
                    url: 'jsp/select-chart-data.jsp',
                    async: true
                };
                var dataAdapter = new $.jqx.dataAdapter(source);

                var currentCategory = 1;

                var settings = {
                    title: "Availability of Products",
                    description: "in Category 1",
                    padding: {
                        left: 5,
                        top: 5,
                        right: 15,
                        bottom: 5
                    },
                    titlePadding: {
                        left: 90,
                        top: 0,
                        right: 0,
                        bottom: 10
                    },
                    source: dataAdapter,
                    xAxis: {
                        dataField: 'ProductName',
                        displayText: 'Product Name',
                        gridLines: {
                            visible: true
                        },
                        valuesOnTicks: false,
                        type: 'basic',
                        labels: {
                            class: 'labels',
                            angle: 90,
                            formatFunction: function (value) {
                                return value.replace(/\?/g, '');
                            }
                        },
                        flip: false
                    },
                    colorScheme: 'scheme01',
                    seriesGroups: [{
                        type: 'column',
                        columnsGapPercent: 30,
                        seriesGapPercent: 0,
                        orientation: 'horizontal',
                        valueAxis: {
                            minValue: 0,
                            unitInterval: 10,
                            description: 'Units in Stock',
                            flip: true
                        },
                        series: [{
                            dataField: 'UnitsInStock',
                            displayText: 'Units in Stock'
                        }]
                    }]
                };

                // select the chartContainer DIV element and render the chart.
                $('#chartContainer').jqxChart(settings);

                $('#jqxDropDownList').jqxDropDownList({
                    source: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'],
                    width: 200,
                    height: 25,
                    autoDropDownHeight: true,
                    selectedIndex: 0
                });

                $('#jqxDropDownList').on('select', function (event) {
                    var args = event.args;
                    if (args) {
                        var index = args.index;
                        currentCategory = index + 1;
                        source.data.category = currentCategory;
                        dataAdapter.dataBind();
                        $('#chartContainer').jqxChart('refresh');
                        $('#chartContainer').jqxChart({
                            description: "in Category " + currentCategory
                        });
                    }
                });

            });
    </script>
</head>
<body>
    <div id='chartContainer' style="width: 860px; height: 600px; margin-bottom: 25px;"></div>
    <strong>Choose Category:</strong>
    <div id="jqxDropDownList" style="margin-top: 5px;"></div>
</body>
</html>
